<template>
    <div class="formBox" style="width: 100%;height:100%;">
        <component :is="currentView" v-bind="props" :key="viewKey"></component>
    </div>
</template>

<script>
import userState from "@/assets/js/userState";
import {RxFit, Util} from "@lowcode/jpaas-common-lib";

import FormBoListEdit from '../core/FormBoListEdit';
import FormBoListTreeEdit from '../core/FormBoListTreeEdit';

import RxLoading from "@/views/modules/bpm/workbench/RxLoading";
import { mapState} from 'vuex';

//打开文档的窗口
export default {
    name: "OpenFormDoc",
    mixins: [userState],
    components:{
        RxFit
    },
    computed:{
        ...mapState({
            appCode: function (state) {
                let key= state.appSetting?state.appSetting.appKey:'';
                return key;
            }
        }),
    },
    data(){
        return {
            props:{},
            currentView:RxLoading,
            actionMap:{
                boList:FormBoListEdit,
                boListTree:FormBoListTreeEdit
            },
            viewKey:"",
        }
    },
    mounted() {
        this.init();
    },
    beforeDestroy(){
        this.$bus.off("flowEvent");
    },

    methods:{
        init(){
            let params=this.$route.params;
            let action=this.$route.query.action;
            let isDialog=this.$route.query.isDialog;
            let appId=this.$route.query.appId;
            if(!action){
                action=params.action;
                isDialog=params.isDialog;
                appId=params.appId;
            }


            this.viewKey=Util.randomId();
            this.currentView=this.actionMap[action];
            if(action=="boList" || action=="boListTree") {
                let conf={
                    pkId: params.pkId,
                    isDialog: isDialog,
                    otherAppId: appId,
                    secondEdit:"NO"
                };
                this.props = conf;
            }
        },
    },
    watch:{
        "$route":function (val,oldVal){
            this.init();
        }
    }
}
</script>

<style scoped>
.formBox{
    display: flex;
    flex-direction: column;
}

.formContainer{
    flex: 1;
    position: relative;
}
.formContainerRoll .formCenter{
    max-width: 1300px;
    margin: auto;
}
.formContainerRoll{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}
.formFooter{
    text-align: right;
    padding: 10px;
    border-top: 1px solid #ddd;
}
.formFooter button{
    margin-left: 6px;
}
.header{
    background-color: #4285f4;
    display: flex;
    justify-content: space-between;
    height: 50px;
    align-items: center;
    padding: 0 10px;
    color: #fff;
}
.logoText{
    display: inline-block;
    padding: 2px 8px;
    line-height: normal;
    border:1px solid #fff;
    border-radius: 4px;
    font-weight: bold;
    margin-right: 6px;
}
.rightToolBar{
    display: flex;
}
.current{
    margin-left: 16px;
    position: relative;
}
.treeBox .text .icon{
    padding-right: 6px;
}
.treeBox .text{
    margin-right: 6px;
}
</style>